<template>
  <div class="login-container">
    <div class="login-head"></div>
    <el-form class="login-form" ref="form" :model="user">
      <el-form-item>
        <el-input
          placeholder="请输入手机号"
          v-model="user.mobile"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入验证码"
          v-model="user.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked"> 我已阅读并同意用户协议和隐私条款</el-checkbox>

      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          :loading="loginLoading"
          type="primary"
          @click="onLogin"
        >登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '',
        code: ''
      },
      checked: false,
      loginLoading: false
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    onLogin () {
      console.log('submit!')
      const user = this.user

      request({
        method: 'POST',
        url: '/mp/v1_0/authorizations',
        data: user
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log('登录失败', err)
      })
    }
  }
}
</script>
<style lang="less">
  .login-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("./login.jpg") no-repeat;
    background-size: cover;
    .login-head {
      width: 300px;
      height: 65px;
      background: url("../../assets/logo.png") no-repeat;
      margin-bottom: 30px;
    }

  }

  .login-form {
    background-color: #fff;
    padding: 55px;
    min-width: 300px;
    .login-btn {
      width: 100%;
    }
  }

</style>
